<!--
 * @Author: 袁十一
 * @Date: 2023-02-07 01:50:00
 * @LastEditTime: 2023-04-18 18:43:24
 * @LastEditors: 袁十一
 * @Description: 页面根
 * @FilePath: \yuan-xis-personal-blog\src\App.vue
 * 初心不变，意志坚定
-->
<template>
  <div class="box">
    <div class="left">
      <img src="./assets/3.jpg" alt="" />
    </div>
    <div class="right">
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        text-color="#ccc"
        :router="true"
      >
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/ImagesView">相册</el-menu-item>
        <el-menu-item index="/LoginView">登录</el-menu-item>
        <el-menu-item index="/RegesiterView">注册</el-menu-item>
        <el-menu-item index="/AboutView">关于我们</el-menu-item>
      </el-menu>
    </div>
  </div>
  <router-view />
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
body {
  margin: 0;
}
.box {
  position: relative;
  width: 100%;
  height: 65px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 99;
}
.left {
  display: flex;
  align-items: center;
  padding-top: 18px;
  padding-left: 300px;
}
.left img {
  width: 50px;
}
.right {
  width: 450px;
  padding-right: 300px;
  padding-top: 23px;
}
</style>
